<template>
	<body-wrap>
		<view class="searchbody">
			<view class="typeBox">
				<radio-group @change="radioChange">
					<view class="rdgbox">
						<view class="rditem">
							<radio :value="1" :checked="type==1" /> <view>专家</view> 
						</view>
						<view class="rditem">
							<radio :value="2"  :checked="type==2"/> <view>问答</view> 
						</view>
						<view class="rditem">
							<radio :value="3"  :checked="type==3"/> <view>预约</view> 
						</view>
					</view>
				</radio-group>
			</view>
			<view class="searchBox">
				<i class="iconfont icon-sousuo"></i>
				<input class="scInput" focus placeholder="关键字搜索" v-model="keyword" @confirm="goSearch"/>
			</view>
			
			<view class="lsbox">
				<view class="title">历史搜索</view>
				<view class="lslist">
					<view class="lsItem" v-for="(dt,index) in historyList" :key="index" @click="hsSearch(dt)">{{dt.keyword}}</view>
				</view>
			</view>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import{setStorage,getStorage} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				type:1,
				keyword:'',
				historyList:[]
			})
			
			onMounted(()=>{
				let hdata = getStorage('historyList') || '[]'
				if(hdata){
					state.historyList = JSON.parse(hdata)
				}
				//console.log("historyList:",state.historyList)
			})
			
			const radioChange =(e)=> {
				console.log(e);
				state.type = e.detail.value
			}
			
			const goSearch =()=>{
				// 处理历史搜索
				const obj = {
					type:state.type,
					keyword:state.keyword
				}
				const fData = state.historyList.find(item =>(item.type==state.type && item.keyword==state.keyword))
				if(!fData){
					state.historyList.push(obj)
					setStorage('historyList',JSON.stringify(state.historyList))
				}
				
				if(state.type ==2){
					uni.switchTab({
						url:`/pages/qa/index?keyword=${state.keyword}`
					})
				}else if(state.type ==3){
					uni.navigateTo({
						url:`/pages/preBook/searchResult?keyword=${state.keyword}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/teacher/teacher?keyword=${state.keyword}`
					})
				}
			}
			
			const hsSearch = (item)=>{
				state.type = item.type
				state.keyword = item.keyword
				goSearch()
			}
			
			return {
				...toRefs(state),
				radioChange,
				goSearch,
				hsSearch
			}
		}
	})
</script>

<style lang="scss" scoped>
	.searchbody{
		padding: 20rpx;
		.searchBox{
			display: flex;
			align-items: center;
			height: 90rpx;
			background: #fff;
			border-radius: 45rpx;
			overflow: hidden;
			.iconfont{
				font-size: 40rpx;
				color: #999;
				margin: 0 15rpx;
			}
			.scInput{
				flex: 1;
				height: 100%;
				border: 0;
				padding: 0 15rpx 0 0;
				font-size: 28rpx;
			}
		}
		.typeBox{
			padding: 15rpx 0 30rpx 0;
			.rdgbox{
				display: flex;
				.rditem{
					display: flex;
					align-items: center;
					margin: 0 40rpx 0 0;
				}
			}
		}
		.lsbox{
			padding: 40rpx 0 0 0;
			.title{
				font-size: 32rpx;
				font-weight: 700;
				padding: 0 0 20rpx 0;
			}
			.lslist{
				.lsItem{
					display: inline-block;
					height: 60rpx;
					line-height: 60rpx;
					background: #fff;
					border-radius: 30rpx;
					border: 1px solid #e8e8e8;
					padding: 0 25rpx;
					margin: 0 20rpx 20rpx 0;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
